import { getlist, getfenlei,jingxuan ,lunbo,find1,find2,find3} from "./API";
import { useState, useEffect, } from "react";
import style from "../css/find.module.css"
import { Button, Swiper, Input, List, InfiniteScroll } from "antd-mobile";
import {RightOutline} from "antd-mobile-icons"
import { useNavigate } from "react-router-dom";
export default () => {
  let [list, setList] = useState([]);
   let [arr, setArr] = useState([]);
    let [book, setBook] = useState([]);
    let [hot, setHot] = useState([]);
  let fenlei = async () => {
    let { data } = await getlist();
    list = data.data.category_list[3].tag_list;
    setList([...list]);
  };
  let nav=useNavigate();
 
  let setlunbo=async ()=>{
    let {data:data3}=await lunbo();
    arr = data3.data.single_list;
    setArr([...arr])
  }
  let setjx=async ()=>{
    let{data:data2}=await jingxuan();
  }
  let setfind1=async ()=>{
    let {data:data4}=await find1();
    console.log(data4);
    
    book=data4.data.list;
    setBook([...book])
  }
  let setfind2=async ()=>{
    let {data:data5}=await find2();
    hot=data5.data.list;
    setHot([...hot])
  }
  let [foot,setFoot]=useState([]);
  let [num,setNnm]=useState(0)
  const [hasMore, setHasMore] = useState(true);
  let setfind3=async ()=>{
    let {data:data6}=await find3(num);
    setNnm(num+10);
    setFoot((val:any):any=>[...val,...data6.data.list]);
    setHasMore(data6.data.list.length>0);
  }
    useEffect(() => {
      fenlei();setjx();setlunbo();
      setfind1();setfind2();
    }, []);
    let item=arr.map((a,b)=>{
       return (
         <Swiper.Item key={a.goods_id}>
           <div className={style.l1} onClick={()=>{nav("/bookxq/id="+a.goods_id)}}>
             <div>
               <img src={a.goods_thumb} alt="" />
             </div>
             <div>
               <h2>{a.goods_name}</h2>
               <p>{a.goods_desc}</p>
             </div>
           </div>
         </Swiper.Item>
       );
    })
  return (
    <div className={style.box}>
      <div className={style.head}>
        <Input placeholder="请输入内容" />
        <Swiper autoplay>{item}</Swiper>
      </div>
      <ul className={style.u1}>
        {list.map((a: any, b: any): any => {
          return (
            <li key={a.id}>
              <img src={a.image} alt="" />
              <p>{a.name}</p>
            </li>
          );
        })}
        <Button
          onClick={() => {
            nav("/all");
          }}
        >
          全部分类
        </Button>
      </ul>
      <div className={style.box2}>
        <h2>
          书单达人 <span>200位阅读推广人联手推荐</span>
        </h2>
        <div className={style.book} onClick={()=>{nav("/book")}}>
          37个书单
          <RightOutline />
        </div>
        <ul className={style.u2}>
          {book.map((a) => {
            return (
              <li key={a.goods_id} onClick={()=>{nav("/bookdan/id="+a.goods_id)}}>
                <img src={a.goods_thumb} alt="" />
                <h2>{a.goods_name}</h2>
                <p>{a.expert_description}</p>
              </li>
            );
          })}
        </ul>
        <div className={style.box3}>
          <div>
            <h3>热门榜单</h3>
            <p>
              详细榜单
              <RightOutline />
            </p>
          </div>
          <ul>
            {hot.map((a) => {
              return (
                <li key={a.attr_val_id}>
                  <h4> {a.title}</h4>
                  <img src={a.gallery[1].image} alt="" />
                </li>
              );
            })}
          </ul>
        </div>
        <div className={style.box4}>
          <h2>
            达人精选 <span>8年绘本馆馆长精选绘本</span>
          </h2>
          <ul>
            <List>
              {foot.map((item, index) => (
                <List.Item key={index}>
                  {" "}
                  <li onClick={()=>{nav("/bookxq/id=" + item.goods_id);}}>
                    <img width={"100px"} src={item.goods_thumb} alt="" />
                    <div>
                      <h3>{item.goods_name}</h3>
                      <p>{item.expert_info.expert_introduction}</p>
                      <p>
                        <img
                          width={"30px"}
                          src={item.expert_info.avatar}
                          alt=""
                        />
                        <span>{item.expert_info.name}</span>
                      </p>
                    </div>
                  </li>
                </List.Item>
              ))}
            </List>
            <InfiniteScroll loadMore={setfind3} hasMore={hasMore} />
          </ul>
        </div>
      </div>
    </div>
  );
};
